<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: flex-start;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
		</view>
		<view style="width: 100%;margin-top: 48rpx;">
			<view style="text-align: center;width: 100%;">
				<view style="width:210rpx; margin: 0 auto;">
					<u-image
						:src="resultIco"
						width="200rpx"
						height="200rpx"
					></u-image>
				</view>
				<view style="font-weight: 600;font-size: 40rpx;color: #232426;margin-top: 56rpx;display: block;" >{{resultTitle}}</view>
				<view style="font-size: 24rpx;color: #6A707C;margin-top: 20rpx;display: block;">{{resultTips}}</view>
			</view>
		</view>
		<view class="body" style="margin-top: 56rpx;">
			<view class="body-card">
				<view class="card-item flex-between">
					<view class="title">成立時間</view>
					<view class="value">{{orderInfo.created_at}}</view>
				</view>
				<view class="card-item flex-between">
					<view class="title">狀態</view>
					<view class="value">{{statusStr}}</view>
				</view>
			</view>
		</view>
		<view class="body" style="margin-top: 24rpx;">
			<view class="body-card">
				<view class="card-item flex-left">
					<u-image
						:src="orderInfo.cover"
						width="68rpx"
						height="80rpx"
						radius="20rpx"
					></u-image>
					<view style="margin-left: 20rpx;">
						<view style="color: #232426;font-size: 28rpx;font-weight: 600; ">{{orderInfo.title}}</view>
					</view>
				</view>
				<view class="card-item flex-between">
					<view class="title">{{orderInfo.nicktitle}}</view>
					<view class="value">{{orderInfo.nickname}}</view>
				</view>
				<view class="card-item flex-between">
					<view class="title">服務類型</view>
					<view class="value">{{orderInfo.serviceTypeStr}}</view>
				</view>
				<view class="card-item flex-between">
					<view class="title">預約時間</view>
					<view class="value">{{orderInfo.appointment_time}}</view>
				</view>
				<view class="card-item flex-between" v-if="orderInfo.service_type == 2">
					<view class="title">到店地址</view>
					<view style="display: flex;justify-content: flex-start;gap: 12rpx;align-items:flex-start;width: 75%;">
						<view class="value">{{orderInfo.address}}</view>
						<view style="display: none;">
							<u-image
								src="/static/images/icon/warning-circle.png"
								width="36rpx"
								height="36rpx"
							></u-image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 56rpx;width: 100%;display: flex;justify-content: center;" v-if="orderInfo" >
			<view @click="chatFn" style="display: flex;justify-content: space-between;align-items: center;margin: 0 8rpx;border: 2rpx solid #E5E6E8;padding: 24rpx 80rpx;border-radius: 200rpx;background-color: #FFF;">
				<view style="color: #232426;font-size: 32rpx;">私訊達人</view>
				<view style="margin-left: 12rpx;">
					<u-image
						src="/static/images/icon/message.png"
						width="32rpx"
						height="32rpx"
					></u-image>
				</view>
			</view>
			<view @click="showOrder" style="display: flex;justify-content: space-between;align-items: center;margin: 0 8rpx;border: 2rpx solid #27C5D6;padding: 24rpx 80rpx;border-radius: 200rpx;background-color: #27C5D6;">
				<view style="color: #FFF;font-size: 32rpx;">查看詳情</view>
				<view>
					<u-image
						src="/static/images/icon/right-white.png"
						width="32rpx"
						height="32rpx"
					></u-image>
				</view>
			</view>
		</view>
		<view style="margin-top: 56rpx;width: 100%;display: flex;justify-content: center;" v-else>
			<view @click="showOrder" style="display: flex;justify-content: space-between;align-items: center;margin: 0 8rpx;border: 2rpx solid #E5E6E8;padding: 24rpx 80rpx;border-radius: 200rpx;background-color: #FFF;">
				<view style="color: #232426;font-size: 32rpx;">查看詳情</view>
				<view style="margin-left: 12rpx;">
					<u-image
						src="/static/images/icon/message.png"
						width="32rpx"
						height="32rpx"
					></u-image>
				</view>
			</view>
			<view @click="appoint()" style="display: flex;justify-content: space-between;align-items: center;margin: 0 8rpx;border: 2rpx solid #27C5D6;padding: 24rpx 80rpx;border-radius: 200rpx;background-color: #27C5D6;">
				<view style="color: #FFF;font-size: 32rpx;">再次預約</view>
				<view>
					<u-image
						src="/static/images/icon/right-white.png"
						width="32rpx"
						height="32rpx"
					></u-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { orderDetail,createChat } from '@/config/api.js';
	
	export default {
		data() {
			return {
				order_number: '',
				orderInfo:{},
				resultIco:'',
				resultTitle:'',
				resultTips:'',
				statusStr:'',
			}
		},
		onLoad(option) {
			this.order_number = option.order_number;
			//查詢訂單信息
			this.getDetail()
		},
		methods: {
			goBack(){
				uni.reLaunch({
					url: '/pages/content/expert?id='+this.orderInfo.fid
				});
			},
			getDetail(){
				let that = this;
				uni.showLoading()
				
				orderDetail({order_number:this.order_number}).then((res) => {
					//success
					uni.hideLoading();
					that.orderInfo = res
					that.setResult()
				}).catch(() =>{
					
				})
			},
			setResult(){
				//隱藏分地址
				this.orderInfo.address = this.truncateString(this.orderInfo.address);
				if( this.orderInfo.type == 1 ){
					
					if(this.orderInfo.unit == 3){
						this.setExpertSuccess()
					} else {
						//檢查訂單狀態
						if( this.orderInfo.status > 0 ){
							this.setExpertSuccess()
						} else {
							this.setExpertError()
						}
					}
				} else {
					const uid = uni.getStorageSync('userId');
					if( uid == this.orderInfo.uid ){
						//下單(搶單)的人
						this.setTaskSuccess();
					} else {
						//檢查訂單狀態
						if( this.orderInfo.status > 0 ){
							this.setExpertSuccess()
						} else {
							this.setExpertError()
						}
					}
				}
			},
			truncateString(str, maxLength = 15){
				if (typeof str !== 'string') return '';
				if (str.length <= maxLength) return str;
				return str.substring(0, maxLength) + '...(部分隱藏)';
			},
			//技能 成功
			setExpertSuccess(){
				console.log('setExpertSuccess');
				this.resultTitle = '預約已成立';
				this.resultTips = '達人將在48小時内確認,確認后即可開始執行';
				this.resultIco = '/static/images/icon/calendar.png';
				this.statusStr = '已成立';
			},
			//技能 失敗
			setExpertError(){
				console.log('setExpertError');
				this.resultTitle = '支付失敗';
				this.resultTips = '請重新嘗試,若問題持續發生,請聯係客服!';
				this.resultIco = '/static/images/icon/danger.png';
				this.statusStr = '失敗';
			},
			//任務 成功
			setTaskSuccess(){
				console.log('setTaskSuccess');
				this.resultTitle = '搶單已經送出!';
				this.resultTips = '對方將在48小時内確認,確認后即可開始執行!';
				this.resultIco = '/static/images/icon/calendar.png';
				this.statusStr = '已成立';
			},
			//任務 失敗
			setTaskError(){
				console.log('setTaskError');
				this.resultTitle = '支付失敗!';
				this.resultTips = '請稍後重試或確認網絡連綫是否正常';
				this.resultIco = '/static/images/icon/danger.png';
				this.statusStr = '失敗';
			},
			//再次預約
			appoint(){
				uni.reLaunch({
					url: '/pages/content/expert?id='+this.orderInfo.fid
				});
			},
			//查看詳情
			showOrder(){
				uni.reLaunch({
					url: '/pages/order/details?order_number='+this.order_number
				});
			},
			chatFn(){
				
				let that = this;
				
				let category = this.orderInfo.snapshot.cms.type == 1?'expert':'task'
				
				let data = {
					category:category,
					target_user_id:this.orderInfo.fuid
				}
				createChat(data).then((res) => {
					//success
					console.log(res)
					uni.navigateTo({
						url: '/pages/my/chatTalk?roomId='+res.id,
						success: res => {},
						fail: () => {},
						complete: (res) => {
							console.log(res)
						}
					});
					
				}).catch(() =>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #F6F8FA;
		min-height: 100vh;
		
		.menu-btn{
			color: #BEC0C5;
			font-size: 32rpx;
			font-weight:500;
			padding-right: 20rpx;
		}
		.menu-btn-active{
			color: #27C5D6;
			font-size: 32rpx;
			font-weight:500;
			padding-right: 20rpx;
		}
	}
	
</style>
